<template>
  <div class="person-list">
    <div class="title">
      成员详情
    </div>
    <div class="person-wraps">
      <div v-for="(personWrap, personWrapIndex) in datas" :key="personWrapIndex"
           @click="$emit('student',personWrap)" class="person-wrap">
        <div class="number">
          {{ String(personWrapIndex + 1).padStart(2, "0") }}
        </div>
        <div class="name">
          {{ personWrap.XM || "--" }}
        </div>
        <div class="tag-box">
          <div v-if="personWrap.gq_type === 1" class="tag" normal>
            已归
          </div>
          <div v-else-if="personWrap.gq_type === 2" class="tag" warn>
            未归
          </div>
          <div v-else-if="personWrap.gq_type === 3" class="tag" error>
            晚归
          </div>
          <div v-else class="tag">
            暂无
          </div>
        </div>
        <div class="arrow">
          &#62;&#62;
        </div>
        <div class="image-box">
          <div class="image" :style="{ backgroundImage: `url(${personWrap.faceUrl})` }" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

// eslint-disable-next-line no-undef
const props = defineProps({
  count: {
    type: Number,
    default: 0,
  },
  datas: {
    type: Array,
    default: () => [],
  },
});

const filledData = computed(() => {
  const fillCount = props.count - props.datas.length;
  return [...props.datas, ...new Array(fillCount).fill({})];
});

defineEmits('student')

</script>

<style lang="less" scoped>
@import "./index.less";
</style>
